<template>
	<view>
		<view class="search-input" id="search-input">
			<!-- 填充状态栏 -->
			<view :style="`height:${app.globalData.STATUS_BAR_HEIGHT}px`"></view>
			<view style="display: flex;align-items: center;padding: 20rpx;">
				<up-icon name="arrow-left" size="48rpx" @click="uni.navigateBack()"></up-icon>
				<up-search style="margin-left: 10rpx;" @click="toSearchPage()" shape="square"
					placeholder="首拼/名称/编号/条码" :clearabled="true" :showAction="false"
					searchIconColor="#4e77cf" height="64rpx"></up-search>
				<view
					style="color: #4e77cf;font-size: 24rpx;display: flex;flex-direction: column;margin-left: 10rpx;">
					<text>搜索</text>
					<text>设置</text>
				</view>
			</view>
		</view>
		<!-- 填充 -->
		<view :style="{height:catagoryViewPaddingTop+'px'}"></view>
		<!-- 数据 -->
		<view :style="{height:catagoryViewHeight+'px'}">
			<scroll-view style="background-color: #ffffff;" 
				scroll-y>
				<view style="padding: 20rpx;border-bottom: 1px solid #dcdfe6;"
					v-for="(item,index) in dataList" @click="selectRightIndex = index">
					<view style="font-weight: bold;">{{item.pname}}</view>
					<view style="color: #75747c;position: relative;">
						<text>&nbsp</text>
						<text
							style="position: absolute;right: 0;">{{ item.bigunit?`￥${item.bigprice}\/${item.bigunit}`:`￥${item.smallprice}\/${item.smallunit}` }}</text>
					</view>
					<view v-show="index==selectRightIndex">
						<view style="display: flex;margin-top: 20rpx;" v-if="item.bigunit"
							v-for="(u_item,u_index) in item.itemList">
							<button v-if="u_item.saletype!='常规销售'"
								@click="showPopup(u_item, item, index)"
								style="display: flex;align-items: center; border:2rpx solid #000;border-radius: 50rpx;padding: 0 20rpx;margin-left: 0;background-color: #f3f2f7;"
								size="mini">
								<text
									style="padding: 0 20rpx;border-radius: 50%;background-color:#e36a4e ;color:#fff">{{u_item.saletype.slice(-1)}}</text>
								<text>{{`￥${u_item.unitprice}\/${u_item.unit}`}}</text>
								<up-icon name="arrow-down-fill"
									style="margin-left: 10rpx;"></up-icon>
							</button>
							<button v-else
								style="display: flex;align-items: center; border:2rpx solid #000;border-radius: 50rpx;padding: 0 20rpx;margin-left: 0;background-color: #f3f2f7;"
								size="mini">
								<text>{{`￥${u_item.unitprice}\/${u_item.unit}`}}</text>
							</button>
							<up-number-box v-model="u_item.number" buttonSize="25" buttonWidth="25"
								min="0"
								@change="countChange($event,brands[selectLeftIndex].brand,index)"
								integer></up-number-box>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
		<view class="bottom-box" id="bottom-box">
			<view style="padding: 20rpx;width: 160rpx;margin-left: auto;">
				<up-button type="primary">添加(1)</up-button>
			</view>
		</view>
	</view>
</template>

<script setup>
	import { ref, reactive, watch } from 'vue'
	import { onReady } from "@dcloudio/uni-app"
	const app = getApp()

	onReady(() => {
		//.box获取class为box的元素，如果使用的id= 'box' 则使用'#box'
		uni.createSelectorQuery().select('#search-input').boundingClientRect(s_data => {
			uni.createSelectorQuery().select('#bottom-box').boundingClientRect(
				b_data => {
					catagoryViewPaddingTop.value = s_data.height
					catagoryViewHeight.value = app.globalData.SCREEN_HEIGHT -
						s_data.height - b_data.height
				}).exec()
		}).exec()
	})
	// 页面布局变量
	const catagoryViewHeight = ref(0)
	const catagoryViewPaddingTop = ref(0)
	
	const dataList = ref([])
</script>

<style lang="scss" scoped>
	page {
		background-color: #fff;
	}

	.search-input {
		width: auto;
		position: fixed;
		left: 0;
		right: 0;
		z-index: 999;
		background-color: #dedede;
	}



	.bottom-box {
		background-color: #ffffff;
		// height: 100rpx;
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		z-index: 998;
		box-sizing: content-box;
		border-top: 1px solid #dedede;
		padding-bottom: env(safe-area-inset-bottom);
	}
</style>